<template>
    <div class="tabLists">
        <ul>

            <li :class="{active:tabIndex===index}" v-for="(item,index) in result " :key='index'>
                <span @click='selectTab(index,item.categoryId)'>{{item.categoryName}}</span>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    props: ['result'],
    data() {
        return {
            tabIndex: 0
        }
    },
    mounted() {
        console.log(this.result)
    },

    methods: {
        selectTab(idx, id) {
            this.tabIndex = idx
            this.$emit('getList', id)
        }
    }
}
</script>
<style lang="scss" scoped>
.tabLists {
    overflow-x: auto;
    padding: 0 18rpx;
    ul {
        white-space: nowrap;
        background: #fff;
        li {
            margin-right: 40rpx;
            height: 60rpx;
            display: inline-block;
            line-height: 60rpx;
            span {
                font-size: 28rpx;
                color: #666;
            }
            &.active {
                span {
                    color: #2a2a2a;
                    position: relative;
                    padding-bottom: 5rpx;
                    font-size: 32rpx;
                    &::after {
                        content: '';
                        position: absolute;
                        width: 50%;
                        height: 1px;
                        background: #2a2a2a;
                        bottom: 0;
                        left: 50%;
                        transform: translateX(-50%);
                    }
                }
            }
        }
    }
}
</style>
